<style type="text/css">
    #PFT_dialogWrap{ display:none; position:fixed; z-index:1001; background:#fff; border-radius:3px; overflow:hidden}
    #PFT_dialogWrap .dialog-head{ position:relative; height:45px; line-height:45px; padding-left:15px; padding-right:45px; background:#f3f3f3; border-bottom:1px solid #e5e5e5}
    #PFT_dialogWrap .dialog-head .dialog-head-txt{ font-size:18px; font-weight:700; color:#333 }
    #PFT_dialogWrap .dialog-head .dialog-closeBtn{ position:absolute; top:0; right:0; bottom:0; display:block; width:42px; line-height:42px; text-align:center; cursor:pointer}
    #PFT_dialogWrap .dialog-head .dialog-closeBtn .iconfont{ color:#000; font-size:16px;}
    #PFT_dialogWrap .dialog-head .dialog-closeBtn:hover{ background:#e5462b}
    #PFT_dialogWrap .dialog-head .dialog-closeBtn:hover .iconfont{ color:#fff}
    #PFT_dialogWrap .dialog-con{ padding:15px;}
</style>
<div id="PFT_dialogWrap" class="PFT_dialogWrap">
    <div id="dialog-head" class="dialog-head">
        <span id="dialog-head-txt" class="dialog-head-txt"></span>
        <span id="dialog-closeBtn" class="dialog-closeBtn"><i class="iconfont">&#xe634;</i></span>
    </div>
    <div id="dialog-con" class="dialog-con"></div>
</div>
<script type="text/javascript">
;(function(RichBase){
    var defaults = {
        title : "",
        content : "",
        opacity : 0.5,
        EVENTS : {},
        onBeforeOpen : function(){},
        onAfterOpen : function(){},
        onBeforeClose : function(){},
        onAfterClose : function(){}
    };
    var Dialog = RichBase.extend({
        statics : {
            count : 0,
            container : null,
            mask : null
        },
        hocks : {},
        init : function(opt){
            var that = this;
            var container = this.statics.container = $("#PFT_dialogWrap");
            var conContainer = this.conContainer = container.children(".dialog-con");
            var head = this.head = $("#dialog-head-txt");
            var mask = this.statics.mask = $("#mask");
            var opt = this.opt = $.extend(defaults,opt || {});
            var EVENTS = this.EVENTS = opt.EVENTS || {};
            var containerH = container.height();
            var containerW = container.width();
            head.text(opt.title);
            conContainer.html(opt.content);
            if(!this.statics.count){
                this.statics.count++;
                container.on("click","#dialog-closeBtn",function(e){
                    that.close();
                });
            }
            setTimeout(function(){
                for(var eventType in EVENTS){
                    var events = EVENTS[eventType];
                    for(var selector in events){
                        (function(selector,events){
                            conContainer.on(eventType,selector,function(e){
                                fn = events[selector];
                                (typeof fn=="function") && fn.call(null,that,e);
                            })
                        })(selector,events);
                    }
                }
            },10);
            container.css({
                left : ($(window).width()-containerW)/2,
                top : -containerH
            });
        },
        open : function(opt){
            var that = this;
            var opt = opt || {};
            var title = opt.title || "";
            var content = opt.content || "";
            var offset = (typeof opt.offset!=="undefined") ? opt.offset : 0;
            var onBeforeOpen = opt.onBeforeOpen || this.opt.onBeforeOpen;
            var onAfterOpen = opt.onAfterOpen || this.opt.onAfterOpen;
            var speed = opt.speed || 400;
            var opacity = opt.opacity || 0.5;
            var container = this.statics.container;
            var win = $(window);
            var winH = win.height();
            var winW = win.width();
            if(typeof opacity=="undefined") opacity = this.opt.opacity;
            this.statics.mask.css({
                "opacity":opacity,
                "zIndex" : 99
            }).fadeIn();
            content && this.conContainer.html(content);
            title && this.head.text(title);
            setTimeout(function(){
                onBeforeOpen(that);
                var containerH = container.height();
                var containerW = container.width();
                container.show().css({
                    left : (winW-containerW)/2,
                    top : -containerH
                });
                container.animate({"top":(winH-containerH)/2+offset},speed,function(){
                    onAfterOpen(that);
                })
            },0)
        },
        close : function(opt){
            var that = this;
            var opt = opt || {};
            var containerH = this.statics.container.height();
            var onBeforeClose = opt.onBeforeClose || this.opt.onBeforeClose;
            var onAfterClose = opt.onAfterClose || this.opt.onAfterClose;
            var speed = opt.speed || 400;
            var offset = opt.offset || 0;
            onBeforeClose(that);
            this.statics.mask.fadeOut(function(){
                that.statics.mask.css("zIndex",-1);
            });
            this.statics.container.animate({top:-(containerH+offset)},speed,function(){
                onAfterClose(that);
            })
        }
    });
    window["PFT"] = window["PFT"] || {};
    PFT.Dialog = Dialog;
})(RichBase);

//
//    demo:
//    var dialog_1 = new PFT.Dialog({
//        title : "测试dialog",
//        onBeforeOpen : function(){ console.log("onBeforeOpen")},
//        onAfterOpen : function(){ console.log("onAfterOpen")},
//        onBeforeClose : function(){ console.log("onBeforeClose")},
//        onAfterClose : function(){ console.log("onAfterClose")},
//        content : '<div class="aa" style="width:600px; height:350px"><button style="margin:20px;" class="button">点击我</button></div>',
//        EVENTS : {
//            "click" : {
//                ".aa .button" : function(that,e){
//                    console.log("点击我");
//                    console.log(that);
//                    console.log(e);
//                }
//            }
//        }
//    });
//    var dialog_2 = new PFT.Dialog({
//        title : "测试dialog2",
//        onBeforeOpen : function(){ console.log("onBeforeOpen")},
//        onAfterOpen : function(){ console.log("onAfterOpen")},
//        onBeforeClose : function(){ console.log("onBeforeClose")},
//        onAfterClose : function(){ console.log("onAfterClose")},
//        content : '<div class="aa2" style="width:600px; height:350px"><button style="margin:20px;" class="button">点击我2</button></div>',
//        EVENTS : {
//            "click" : {
//                ".aa2 .button" : function(that,e){
//                    console.log("点击我2");
//                    console.log(that);
//                    console.log(e);
//                }
//            }
//        }
//    });
//    dialog_1.open({
//        title : "测试dialog",
//        content : '<div class="aa" style="width:600px; height:350px"><button style="margin:20px;" class="button">点击我</button></div>'
//    });
//    dialog_2.open({
//        title : "测试dialog2",
//        content : '<div class="aa2" style="width:600px; height:350px"><button style="margin:20px;" class="button">点击我2</button></div>'
//    });
//


</script>
